/**
 * @author Created by qiush on 2017-07-06.
 */

import * as React from 'react';

import {IChildSelectionProps} from './IChildSelection';

import './TabPane.css';

/**
 * 简单的切换的处理, 没有做动画效果, 只是直接显示当前选中的组件(如果选中的组件是这个的直接子组件的话)
 */
class AbsOneChildVisiblePane extends React.Component<IChildSelectionProps, undefined> {

  protected renderChildren(): JSX.Element[] {
    const current: number = Math.max(0, this.props.current);
    return React.Children.map(this.props.children, (child: React.ReactChild, index: number): JSX.Element => {
      // 只有当前选中的组件(或者是第一个组件) 才显示, 其他的子组件都隐藏
      const className: string = this.getChildClass(current, index);
      const style: React.CSSProperties = this.getChildStyle(current, index);
      return (
        <div className={className} style={style}>
          {child}
        </div>
      );
    });
  }

  protected getChildClass(current: number, childIndex: number): string {
    return '';
  }

  protected getChildStyle(current: number, childIndex: number): React.CSSProperties {
    if (current < 0) {
      /*return {
       transform: `rotateY(20deg) translate(${childIndex * 20}px, ${childIndex * 10}px)`,
       transformOrigin: 'left',
       position: 'absolute',
       width: '100%',
       top: 0,
       backgroundColor: '#efefef'
       };*/
    }
    if (current === childIndex) {
      return {};
    }
    return {
      display: 'none'
    };
  }

}

export default AbsOneChildVisiblePane;
